<template>
  <div class="app-list">
    <div class="list-info">
      <span class="list-title">{{title}}</span>
      <span class="list-count">{{todolist.length}}</span>
    </div>
    <ul>
      <li v-for="(item,key) in todolist" :key="item.val">
        <span @click="add(key)">+</span>
        <input type="text" v-model='todolist[key] '  @blur="editable = false" :readonly='editable'>
        <span @click="clickToDel(key)">-</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'appList',
  data() {
    return {
      todolist: [],
      editable: true,
      val: '',
    };
  },
  methods: {
    clickToDel(index) {
      this.todolist.splice(index, 1);
    },
    add(index) {
      this.$emit('output', this.todolist.splice(index, 1)[0]);
    },
  },
  props: ['title', 'injectmsg'],
  watch: {
    injectmsg() {
      // this.injectmsg !== '' && this.todolist.push(this.injectmsg);
      if (this.injectmsg !== '') {
        this.todolist.push(this.injectmsg);
      }
      this.$emit('update:injectmsg', '');
    },
  },
};
</script>

<style scoped>

</style>
